<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础知识点</title>
</head>
<body>
    
</body>
</html>
<script>
    //于20年春节 北京丰台 记录   //2021-06-08-夜补充     //2021-08-04-夜补充
    //每一个不曾翩翩起舞的日子 都是对生命的辜负 
/*   
    //走你
      //TypeScript 微软公司2012发布 
      //学习ts的声明变量类型，能够初步编写强类型代码
      //学习ts的接口，进一步强定义对象的丰富属性
      //学习ts的函数声明和实现定义，强类型化你的js函数 
      

    // TypeScript 是JavaScript的超集  pro加强版  
         // 像是css & less & sass一样的关系  
         // 像是less & sass是对css的拓展一样，ts也是对js的拓展
         // 像less&sass最后会转成css一样，写好的ts最终也会转为js  
         // TypeScript是建立在JavaScript之上的，最后都会转变成JavaScript
         /*
            ts明确了抽象在大型的工程项目中，我们希望模块之间的边界是使用接口定义的，ts可以定义接口
              即代码本身具有自我说明，而不是依赖文档,
        
    
    //为啥毛需要ts？
         //因为js是弱类型的，很多错误只有在运行时才会被发型 
         //弱类型即(定义变量时不需要指定类型，一个变量可以储存任意类型的值，但时并不代表js不区分数据类型,不够严谨)
         //而ts是强类型的，提供了一套静态检测机制，如果在编写中途换变量的类型，ts就会报错，帮我们在编写时发现错误(包容之处)
         //ts为帮助js弥补在大型项目中的缺陷而生 


    //ts特点？ 
         //支持最新的js新特性 即es6增加了代码的可读性&可维护性 
         //支持运行在任何的浏览器,Node.js环境中 
         //支持代码静态检查 (不执行时红波浪线)   
         //支持类型系统--且拥有类型推断(枚举，泛型，类型转换，命名空间，声明文件，类，接口等)
         //..
         
     //ts中的类型声明
         //ts支持js几乎相同的数据类型
         //此外还提供了枚举类型，元组方便使用，更加严谨 方便灵活
         //特别是大型项目中，真的好用。比如说它的扩展语法、面向对象、静态类型。
         //如果一个前端项目我可以做主，我会在强烈的要求所有人都使用 TypeScript 的语法进行编程。
*/

//------------------------------------------------------------------------------------------------------------------------------------------------------------------
      //建立项目目录和编译 TS 文件     tsc demo.ts  node demo.js  
      
      //ts-node安装和使用 
      //上面操作效率太低了 可以使用ts-node插件来解决 有了这个插件 就不用再编译了 ts-node一下直接看结果
      //npm 命令行来安装 
        npm install -g ts-node 
      //安装ok后 在命令中直接输入如下命令，来查看结果
        ts-node Demo1.ts        
      //ts中最主要的特点就是 可定义静态类型 (Static Typing) 即一但定义就不可再改变了   
     
//自定义静态类型---------------------------------------------------------------------------------------------------------------------------------------------- 
        interface Xiaojiejie {
            uname:string;
            age:number;
        }
        const xiaohong:Xiaojiejie ={ 
            uname:"小红";
            age:18,
        } 
        //注意 xiaohong变量也具有uname&age属性了 
        //如果使用了静态类型 意味着变量的类型不可改变 类型的属性和方法也确定了
        //这个特点 大大提高了程序的健壮性 且编辑器会给语法提示 加快开发效率 
        
        //静态类型 
        //基础静态类型---------------------------------------------------------------------------------------------------------------------------------------------- 
        //即再声明变量后面加:号 再加上对应的类型 示例如下 声明一个数字类型的变量 叫count
        const count:number = 123;
        const myName:string = "常东东";
        //等等 null,undefined,symbol,boolean,void常用的基础数据类型 

        //对象类型----------------------------------------------------------------------------------------------------------------------------------------------
        //对象类型几种形式 对象类型 数组类型 类类型 函数类型 
        const xiaojiejie:{
            name:string,
            age:number,
        } = {
            name:"大头",
            age:18,
        };
        console.log(xiaojiejie.name);  //大头  

        //对象类型也可以是数组
        //注意这里 变量xiaojie必须是一个数组 数组中内容必须是字符串   
        const xiaojie:String[] = ["大脸","大眼睛","长腿"];

        //用类的形式定义变量 
        //注意这里 变量dajiao必须是一个Person类对应的对象才可以 
        class Person {}
        const dajiao:Person = new Person();

        //定义一个函数类型 并确定返回值 
        const j:()=>string=()=>{
            return "噢吼";
        }
//----------------------------------------------------------------------------------------------------------------------------------------------
//类型注释 (type annotation)
        let count:number;
        count = 123;
        //这段代码就是类型注释 count是一个数字类型这就叫类型注释 

//类型推论 (type inferrence)
        let countInferce = 123;
        //这时候我并没有显示的告诉你变量countInference是一个数字类型，但是如果你把鼠标放到变量上时，
        //你会发现 TypeScript 自动把变量注释为了number（数字）类型，也就是说它是有某种推断能力的，
        //通过你的代码 TS 会自动的去尝试分析变量的类型

//涉及到业务逻辑中去      
        //如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
        //如果 TS 无法分析变量类型的话， 我们就需要使用类型注解
        //demo 不用写类型注释的例子 
        const one = 1;
        const two = 2;
        const three = one + two; 

        //demo用写类型注释的例子 (来看这个用写类型注释的例子了)
        function getTotal(one,two){
            return one+two;
        }
        const total = getTotal(1,2);
        //这种形式 需要用到类型注释 因为one和two会显示为any类型 
        //当你传进来字符串 业务逻辑就错误了 所以你必须加一个类型注释 
        //修改上面的代码如下  
        function getTotal(one:numebr,two:number){
            return one+two;
        }
        const total = getTotal(1,2);   //即加上了类型注释 确保类型
        //注意为啥毛 total这个变量不需要加类型注释 
        //因为当one & two两个变量加上注释后 ts就自动通过类型推断 分析出变量的类型 

//ts也可以推断对象属性的类型      
        const oh = {
            name:"大妈",
            age:28
        };
        //即在ts里面每个变量 每个对象的属性类型都应该是固定的 
        //如果你让它推论 就推论  推论不出来的时候即进行注释 



//----------------------------------------------------------------------------------------------------------------------------------------------
//ts中数组类型的定义 
        //一般数组类型定义 
        //数字类型 
        const numberArr = [1,2,3];              //类型推论
        const numberArr:numberArr[] = [1,2,3]   //类型注释
        //同样的道理 加入数组各项为字符串 就这样写了 
        const stringArr:string[] = ["一","二","三"]
        //也就i是说可以定义容易类型的数组 比如undefinded 
        const undefinedAff:undefined[] = [undefined,undefined];

        //嗯哼加入数组中有多种类型了 比如有数组和字符串
        //简单定义时() 在里面加| 
        const add:(number|string)[] = [1,"srtring",2];

//数组中对象的定义 
        //在项目里面数组中一定会由对象的出现 
        //demo
        //这个比较麻烦 ts用类型别名解决 
        const xjj:{name:"string",age:number}[] = [
            {name:"大美",age:19},
            {name:"小红",age:20}
        ]
        //类型别名 
        type Lady = {name:string,age:number};
        //有了这样的类型别名 改造demo中的例子  
        type Lady = {name：string,age:number};
        const xjj:Lady[] = [
            {name:"大美",age:19},
            {name:"小红",age:20}
        ]

//ts中的元组类型 使用和类型约束 
        //ts中提供了元组的概念 、
        //一般只在数据源时cvs这种文件的时候 会使用元素 即元组时数组的加强版 更好的控制&规范里面的类型 
     
        //元组的基本使用 
        
        //来看一个数组和这个数组注解的缺点，比如我们有一个数组，数组中有姓名、职业和年龄，代码如下：
        const xiaojiejie = ["dajiao", "teacher", 28];
        //把鼠标放到xiaojiejie变量上面，可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解，代码如下：
        const xiaojiejie: (string | number)[] = ["dajiao", "teacher", 28];
        //这里已经增加了代码注解，但是这并不能很好的限制，比如我们把代码改成下面的样子，TypeScript依然不会报错。
        const xiaojiejie: (string | number)[] = ["dajiao", 28, "teacher"];
        //只是简单的把数组中的位置调换了一下，但是TypeScript并不能发现问题，这时候我们需要一个更强大的类型，来解决这个问题，这就是元组。
        //元组和数组类似，但是类型注解时会不一样。
        const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];
        //这时候我们就把数组中的每个元素类型的位置给固定住了，这就叫做元组。
        
        //.严格限制类型和长度的元组数组 
        //ts中的元组类型其实就是数组类型的拓展，元素用于保存，定长定数据类型的数据
        //元组类型[string,number,boolean]
        let arr5:[string,number,boolean];//表示定义了一个名arr5的元组，这个元组中将来可以存储3个元素
                                         //第一必须是字符串，第二个必须是数值，第三个必须是布尔值
        arr5 = ["a",1,true];
        arr5 = ["a",1,false,true] //报错 超长了
        console.log(arr5)                 //a,1,true
        


//



















































</script>